<template>
  <div id="topMenu" ref="topMenu">
    <h1 class="title">顶部菜单</h1>
    <div class="main-cont">
      <v-toolbar @click="handleToolClick"></v-toolbar>
      <div class="table-cont mt10">
        <el-table
          :data="tableData"
          style="width: 100%" :height="height">
          <el-table-column type="expand" min-width="100">
            <template slot-scope="props">
              <!--第二层-->
              <el-table :data="props.row.List" :show-header="false">
                <el-table-column label="图标">
                  <template slot-scope="scope">
                    <img :src=scope.row.ImageUrl alt="">
                  </template>
                </el-table-column>
                <el-table-column prop="Title" label="标题"></el-table-column>
                <!--占位-->
                <el-table-column prop="" label=""></el-table-column>
                <!--占位-->
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="图标" min-width="100">
            <template slot-scope="scope">
              <img :src="scope.row.ImageUrl" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="Title" label="标题"></el-table-column>
          <el-table-column prop="Url" label="URL"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="modifyMenu(scope.row)">修改</el-button>
              <el-button type="text" size="mini" @click="delMenu(scope.row)">删除</el-button>
              <el-button type="text" size="mini" @click="handleToolConfig(scope.row)">配置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--增加/修改弹窗-->
    <v-dialog
      :title="editMode === 'ADD' ? '新建顶部菜单' : '修改顶部菜单'"
      name="addDialog"
      :isVisible="dialogFormVisible"
      @close="closeDialog">
      <template slot="dialog-cont">
        <el-form :model="form" :rules="formRules" ref="menuForm" class="dialog-main dialogForm">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="顶部菜单名称" prop="Title">
                <el-input v-model="form.Title" autocomplete="off" placeholder="请输入顶部菜单名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="顶部菜单URL" prop="Url">
                <el-input v-model="form.Url" autocomplete="off" placeholder="请输入顶部菜单URL"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="顶部菜单图片" prop="ImageUrl">
                <v-upload title="选择顶部菜单图片" :picUrl="form.ImageUrl" @change="handlePicChange"></v-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否显示标题" prop="IsShowTitle">
                <el-switch v-model="form.IsShowTitle"
                    active-value="on"
                    inactive-value="off">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template slot="dialog-btns">
        <div class="form-buttons">
          <el-button @click="resetForm('menuForm')" size="mini">重置</el-button>
          <el-button @click="closeDialog('addDialog')" size="mini">关闭</el-button>
          <el-button type="primary" @click="validForm" size="mini">确定</el-button>
        </div>
      </template>
    </v-dialog>
    <!--配置-->
    <v-dialog
      title="配置子项目"
      name="configDialog"
      :isVisible="isConfigShow"
      @close="closeDialog">
      <template slot="dialog-cont">
        <el-table
          ref="multipleTable"
          :data="tableConfig"
          tooltip-effect="dark"
          class="dialog-main dataTable">
          <el-table-column
            label="图片"
            min-width="240">
            <template slot-scope="scope">
              <img :src="scope.row.ImageUrl" alt="" width="30" height="30">
            </template>
          </el-table-column>
          <el-table-column
            prop="Title"
            label="名称"
            min-width="240">
          </el-table-column>
          <el-table-column
            min-width="120"
            label="选择">
            <template slot-scope="scope">
              <el-checkbox :key="scope.$index" :checked="scope.row.ischecked" @change="handleSelectChange(scope.row)"></el-checkbox>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template slot="dialog-btns">
        <div class="form-buttons">
          <el-button @click="submitConfigList" size="mini">选择完成</el-button>
        </div>
      </template>
    </v-dialog>
  </div>
</template>
<script>
  import VToolbar from '../../comm/iToolbar/iToolbar'
  import VDialog from '../../comm/iDialog/iDialog'
  import VUpload from '../../comm/iUpload/iUpload'
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  export default {
    components: {
      VToolbar,
      VDialog,
      VUpload
    },
    data () {
      return {
        dialogFormVisible: false, // 修改添加菜单弹窗是否显示
        isConfigShow: false, // 配置子菜单弹窗是否显示
        tableData: [], // top菜单列表数据
        height: null, // 高度
        form: { //  增加修改弹窗表单值
          Title: '',
          Url: '',
          IsShowTitle: '',
          ImageUrl: '',
          Id: ''
        },
        formData: {},
        formRules: {
          Title: [{ required: true, message: '请输入顶部菜单名称', trigger: 'blur' }],
          Url: [{ required: true, message: '请输入顶部菜单RUL', trigger: 'blur' }],
          ImageUrl: [{ required: true, message: '请选择顶部菜单图标', trigger: 'change' }]
        },
        editMode: 'ADD',
        tableConfig: [], // 子配置列表
        checkedList: [], // 选中的子配置
        referCheckId: '' // 当前配置子项目ID
      }
    },
    created () {
      this.$nextTick(() => {
        this.height = this.$refs.topMenu.offsetHeight - 136
      })
      this.getMenuList()
    },
    methods: {
      // 工具栏操作处理
      handleToolClick (oprType) {
        switch (oprType) {
          case 'add':
            this.addMenu()
            break
          default:
            break
        }
      },
      // 获取顶部菜单列表
      getMenuList () {
        // this.dialogFormVisible = false
        ajax.get(api.QUERY_TOP_BTNS).then(res => {
          let menuList = res.TopBtns
          if (menuList !== undefined && menuList.length > 0) {
            this.tableData = menuList
          }
        })
      },
      // 发布前的验证
      validForm () {
        this.$refs.menuForm.validate((valid) => {
          if (valid) {
            if (this.editMode === 'ADD') {
              this.submitForm(api.TOPBTNCREATE)
            } else {
              this.submitForm(api.TOPBTNUPDATE)
            }
          } else {
            return false
          }
        })
      },
      // 创建菜单
      submitForm (ajaxUrl) {
        let params = {
          Title: this.form.Title,
          Url: this.form.Url,
          IsShowTitle: this.form.IsShowTitle === 'on' ? '1' : '0',
          ImageUrl: this.form.ImageUrl
        }
        if (this.editMode === 'EDIT') {
          params.id = parseInt(this.form.Id)
        }
        ajax.post(ajaxUrl, params).then(res => {
          if (res.Code === 0) {
            this.$message({
              type: 'success',
              message: '顶部菜单创建成功'
            })
            this.closeDialog('addDialog')
            this.getMenuList()
          }
        })
      },
      // 初始化表单
      initForm (formName) {
        this.$refs[formName].resetFields()
        this.form = {
          Title: '',
          Url: '',
          IsShowTitle: 'off',
          ImageUrl: '',
          Id: ''
        }
      },
      // 重置
      resetForm (formName) {
        this.initForm('menuForm')
        if (this.editMode === 'EDIT') {
          this.form = {...this.formData}
          this.form.IsShowTitle = this.form.IsShowTitle === '0' ? 'off' : 'on'
        }
      },
      // 处理图片选择
      handlePicChange (data) {
        this.form.ImageUrl = data.url
      },
      // 新增菜单
      addMenu () {
        this.editMode = 'ADD'
        this.dialogFormVisible = true
      },
      // 编辑菜单
      modifyMenu (data) {
        this.form = JSON.parse(JSON.stringify(data))
        this.formData = JSON.parse(JSON.stringify(data))
        this.form.IsShowTitle = data.IsShowTitle === '0' ? 'off' : 'on'
        this.editMode = 'EDIT'
        this.dialogFormVisible = true
      },
      // 删除
      delMenu (row) {
        this.$confirm('确定要删除该顶部菜单吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id: parseInt(row.Id)
          }
          ajax.get(api.TOPBTNDELETE, params).then(res => {
            if (res.Code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.getMenuList()
            }
          })
        }).catch(_ => {})
      },
      // 配置
      handleToolConfig (row) {
        this.tableConfig = []
        // 第一获取已选中的
        let getData = {
          id: row.Id
        }
        ajax.get(api.TOPBTNDETAIL, getData).then(res => {
          this.referCheckId = res.Id
          this.checkedList = res.IdList
          let params = {
            t: (new Date()).valueOf(),
            type: ''
          }
          // 第二次获取所有子配置
          ajax.get(api.QUERY_APP_LIST, params).then(res => {
            let ItemAppList = res.Apps
            if (this.checkedList !== undefined) {
              for (let i = 0; i < ItemAppList.length; i++) {
                if (this.checkedList.indexOf((ItemAppList[i].Id + '')) !== -1) {
                  ItemAppList[i].ischecked = true
                } else {
                  ItemAppList[i].ischecked = false
                }
              }
            }
            this.tableConfig = ItemAppList
            this.isConfigShow = true
          })
        })
      },
      // 配置子项目选中的值
      handleSelectChange (val) {
        let newtableConfig = this.tableConfig
        for (let index in newtableConfig) {
          if (val.Id === newtableConfig[index].Id) {
            newtableConfig[index].ischecked = !newtableConfig[index].ischecked
          }
        }
        this.tableConfig = newtableConfig
      },
      // 子配置选择完成
      submitConfigList () {
        let subConfigchecked = []
        for (let index in this.tableConfig) {
          if (this.tableConfig[index].ischecked === true) {
            subConfigchecked.push(this.tableConfig[index].Id + '')
          }
        }
        let params = {
          Id: parseInt(this.referCheckId),
          IdList: subConfigchecked
        }
        ajax.post(api.TOPBTNCONFIG, params).then(res => {
          if (res.Code === 0) {
            this.$message({
              type: 'success',
              message: '顶部菜单子项目配置成功'
            })
            /* this.isConfigShow = false */
            this.closeDialog('configDialog')
            this.getMenuList()
          }
        })
      },
      closeDialog (name) {
        // 取消重置
        switch (name) {
          case 'addDialog':
            this.initForm('menuForm')
            this.dialogFormVisible = false
            break
          case 'configDialog':
            this.isConfigShow = false
            break
          default:
            break
        }
      }
    }
  }
</script>
<style lang="stylus">
  #topMenu
    height 100%
    overflow hidden
    .title
      height 60px
      padding 15px
      line-height 30px
      font-size 18px
      font-weight normal
      background #fff
    .main-cont
      margin:10px 0 0px 10px
      .table-cont
        img
          height:30px
          max-width:50px
</style>
